/*
 * @Author: Moreduo 
 * @Date: 2022-01-12 17:50:44 
 * @Last Modified by: Moreduo
 * @Last Modified time: 2022-01-13 17:41:37
 */
 
/* 
 * 浏览器前缀
 * @param $map
 *  $map:(
 *    'user-select':none
 *  );
 * @include prefix($map)
 */
@mixin prefix($map, $vendors: webkit moz ms o) {
  @each $prop, $value in $map {
      @if $vendors {
          @each $vendor in $vendors {
              #{"-" + $vendor + "-" + $prop}: #{$value};
          }
      }
      #{$prop}: #{$value};
  }
}

// 清除浮动
@mixin clearfix {
  &:after {
    clear: both;
    content: '.';
    display: block;
    height: 0;
    line-height: 0;
    overflow: hidden;
  }
}

/**
 * @param $line       超出显示省略号的行数，默认：1
 * @param $substract  为预留区域百分比%，默认：0
 * @param $display    转成块级元素，默认：inline-block
 */
 @mixin ellipsis($line: 1, $substract: 0, $display:inline-block) {
  overflow: hidden;
  @if $line==1 {
      display: $display;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100% - $substract;
  }
  @else {
      display: -webkit-box;
      -webkit-line-clamp: $line;
      -webkit-box-orient: vertical;
  }
}

// 表单占位文字颜色
@mixin placeholder($color: #bbb) {
  &::-moz-placeholder {
    color: $color;
    opacity: 1; 
  }
  &:-ms-input-placeholder {
    color: $color;
  }
  &::-webkit-input-placeholder {
    color: $color;
  }
}


// 定义滚动条样式 圆角和阴影不需要则传入null
@mixin scrollBar($width:10px,$height:10px,$outColor:$gray-300,$innerColor:$gray-600,$radius:0,$shadow:null) {
  // 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    background-color: $outColor;
  }
 
  // 定义滚动条轨道 内阴影+圆角
  &::-webkit-scrollbar-track {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $outColor;
  }
 
  // 定义滑块 内阴影+圆角
  &::-webkit-scrollbar-thumb {
    @if ($shadow!=null) {
      -webkit-box-shadow: $shadow;
    }
    @if ($radius!=null) {
      border-radius: $radius;
    }
    background-color: $innerColor;
    border: 1px solid $innerColor;
  }
  
}


/**
 * @desc  三角形
 * @param $width
 * @param $height
 * @param $color
 * @param $direction: top bottom left right
 */
 @mixin triangle($width, $height:$width, $color: #000, $direction: top) {
  $map-direction: (
      top: bottom left right,
      bottom: top left right,
      left: right top bottom,
      right: left top bottom
  );
  @if not map-has-key($map-direction, $direction) {
      @error "triangle $direction 必须为：#{map-keys($map-direction)}";
  }
  $conf: map-get($map-direction, $direction);
  @if $direction==top or $direction==bottom {
      $width: $width/2;
  }
  @else {
      $height: $height/2;
  }
  position: absolute;
  height: 0;
  width: 0;
  border-#{nth($conf, 1)}: $height solid $color;
  border-#{nth($conf, 2)}: $width solid transparent;
  border-#{nth($conf, 3)}: $width solid transparent;
}


/**
 * @desc  绘制箭头(调整不同的背景色，可以绘制待边框三角形)
 * @param $width
 * @param $border-width
 * @param $direction: top bottom left right
 * @param $background-color
 * @param $position 默认relative
 * @include arrow(10px,1px,right,$red,$white)
 */
 @mixin arrow($width, $border-width, $direction, $color, $background-color, $position: relative) {
  $map-direction: (
      top: bottom left right,
      bottom: top left right,
      left: right top bottom,
      right: left top bottom
  );
  @if not map-has-key($map-direction, $direction) {
      @error "arrow $direction 必须为：#{map-keys($map-direction)}";
  }
  $conf: map-get($map-direction, $direction);

  position: $position;
  &:before,
  &:after {
      content: "";
      position: absolute;
  }
  &:before {
      top: 0;
      left: 0;

      border-#{nth($conf, 1)}: $width solid $color;
      border-#{nth($conf, 2)}: $width solid transparent;
      border-#{nth($conf, 3)}: $width solid transparent;
  }
  &:after {
      border-#{nth($conf, 1)}: ($width - $border-width) solid $background-color;
      border-#{nth($conf, 2)}: ($width - $border-width) solid transparent;
      border-#{nth($conf, 3)}: ($width - $border-width) solid transparent;
      top: if($direction==bottom, 0, $border-width);
      left: if($direction==right, 0, $border-width);
  }
}